<template>
  <div id="cpn-popover-field" :style="{ width: width, maxWidth: maxWidth }">
    <el-popover placement="top-start" ref="popoverRef" :content="value" :width="popWidth" :maxWidth="popMaxWidth" :trigger="trigger"
      :disabled="!isShow">
      <template #reference>
        <div class="chyBox" ref="chyBoxRef" id="btBox" :style="{ lineClamp: line }">{{ value || '--' }}</div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, nextTick } from 'vue'

interface Props {
  value: string
  line?: number
  trigger?: string
  width?: string
  maxWidth?: string
  popWidth?: string
  popMaxWidth?: string
}

const props = withDefaults(defineProps<Props>(), {
  line: 1,
  trigger: 'hover',
  width: '',
  maxWidth: '',
  popWidth: '',
  popMaxWidth: '',
})

const isShow = ref(false)
const chyBoxRef = ref<HTMLElement | null>(null)
const handlePage = async () => {
  await nextTick()
  const textNode = chyBoxRef.value
  if (textNode && textNode.scrollHeight > textNode.offsetHeight) {
    isShow.value = true
  } else {
    isShow.value = false
  }
  // console.log('textNode', textNode.scrollHeight > textNode.offsetHeight, isShow.value, textNode.innerHTML)
}

watchEffect(() => {
  handlePage()
})

onMounted(() => {
  handlePage()
});

</script>

<style lang="scss" scoped>

#cpn-popover-field {
  white-space: normal !important;

  .chyBox {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>
